<template>
	<view>
		<u-navbar title="意见反馈" :autoBack="true" placeholder>
		</u-navbar>
		<view class="px-8 pt-8">
			<view class="bg-fff px-16 br-8">
				<view class="flex-align py-16 form-item">
					<view class="fw-500 fs-14 lh-2 color-5F6865 ">联系方式</view>
					<input v-model="formData.contact" maxlength="11" class="flex-1" type="text"
						placeholder="请输入电话，以便我们及时回复" placeholder-class="input-css" />
				</view>
				<view class="fw-500 fs-14 lh-2 color-5F6865 mt-16">反馈内容</view>
				<view class="py-16">
					<u--textarea v-model="formData.content" border="none" maxlength="300" autoHeight
						placeholder="感谢您提供的建议和投诉" count></u--textarea>
				</view>
				<!-- <view class="pb-16 flex-align">
					<view class="image-box" @click="chooseImage">
						<image v-if="formData.attachment" :src="formData.attachment" mode="aspectFill"></image>
						<image v-else src="/static/image/upload-image.png" mode="aspectFill"></image>
					</view>
					<view class="fw-400 fs-12 lh-2 color-5F6865 ps-8">图片格式为jpg/png</view>
				</view> -->
				<view>
					<UploadBox :count="6" :span="3" @uploadChange='uploadChange'>
					</UploadBox>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="footer bg-fff px-10 pt-8 flex-align"
			:style="{paddingBottom:`${$f.sys().safeAreaBottom ? $f.sys().safeAreaBottom : 10}px`}">
			<u-button text="提交" @click="$u.debounce(submitFeedback,500,true)"
				customStyle="background-color: #24C98F;color:#fff;border:none;"></u-button>
		</view>
	</view>
</template>

<script>
	import UploadBox from "@/components/uploadBox.vue";
	export default {
		components: {
			UploadBox,
		},
		data() {
			return {
				formData: {
					content: '',
					contact: '',
					attachment: ''
				}
			}
		},
		methods: {
			//上传图片返回
			uploadChange(e) {
				console.log('上传回调', e);
				this.formData.attachment = e;
				// this.images = e;
			},
			// 表单验证
			validateForm() {
				if(!this.formData.contact) return this.$f.msg('请先输入手机号码');
				if (this.formData.contact && this.formData.contact.trim() !== '') {
					const phoneReg = /^1[3-9]\d{9}$/;
					if (!phoneReg.test(this.formData.contact)) {
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: 'none'
						});
						return false;
					}
				}

				if (!this.formData.content || this.formData.content.trim() === '') {
					uni.showToast({
						title: '请输入反馈内容',
						icon: 'none'
					});
					return false;
				}

				if (this.formData.content.length > 300) {
					uni.showToast({
						title: '反馈内容不能超过300字',
						icon: 'none'
					});
					return false;
				}


				return true;
			},

			submitFeedback() {
				if (!this.validateForm()) {
					return;
				}
				this.$api.post({
					url: '/companion/updateInfo/feedback',
					data: {
						content: this.formData.content.trim(),
						contact: this.formData.contact.trim(),
						attachment: this.formData.attachment ? this.formData.attachment.join(',') : '',
						userType:2
					},
					loadingTip: '提交中...',
					success: (res) => {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							mask:true,
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					},
					fail: (err) => {
						let errorMsg = '提交失败，请稍后重试';
						if (err.data && err.data.msg) {
							errorMsg = err.data.msg;
						} else if (err.msg) {
							errorMsg = err.msg;
						}
						uni.showToast({
							title: errorMsg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	
	::v-deep .u-row{
		flex-wrap: wrap !important;
	}

	.form-item {
		border-bottom: 1px solid #F2F6F5;

		input {
			text-align: right;
			font-size: 28rpx;
		}

	}

	.input-css {
		font-weight: 400;
		font-size: 28rpx;
		color: #999;
	}

	::v-deep .u-textarea {
		padding: 24rpx 40rpx 64rpx 40rpx !important;
		border-radius: 8rpx !important;
		font-size: 28rpx !important;
		min-height: 70px !important;
		border: 1px solid #DDDDDD;
		background-color: transparent !important;
	}

	::v-deep .u-textarea__count {
		bottom: 20rpx !important;
		right: 20rpx !important;
		background-color: transparent !important;
	}

	::v-deep .input-placeholder {
		font-size: 28rpx !important;
		font-weight: 400 !important;
		color: #999999 !important;
	}

	.image-box {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title-box {
		view {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 8rpx;
				height: 100%;
				background-color: #24C98F;
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid #0000000D;
		backdrop-filter: blur(4px);
	}
</style>